
// 从 vue-router 中导入函数
import { createRouter , createWebHistory } from 'vue-router';

import topicRoutes from './topic';
import userRoutes from './user';

// 注意 `@` 是 `src` 的别名
import HeaderView from '@/views/HeaderView.vue';
import FooterView from '@/views/FooterView.vue';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';
import ReceiverView from '@/views/ReceiverView.vue';
import NotFound from '@/views/NotFound.vue';

// 定义一个路由数组，其中的每个对象都是一个路由
const routes = [
    {  path: '/' , redirect: '/home' },
    {  
        path: '/home', 
        name: 'home' , 
        // 采用路由记录导航后打开的组件中有多个命名视图时,
        // 就需要在 components 中分别为不同视图设置组件
        components: {
            // 冒号之前即为命名视图的名称
            'header': HeaderView ,
            'default': HomeView ,
            'footer': FooterView
        },
        // 配置路由元信息
        meta: {
            title: '首页'
        }
    },
    {  
        path: '/about', 
        name:'about' , 
        components: {
            // 冒号之前即为命名视图的名称
            'header': HeaderView ,
            'default': AboutView ,
            'footer': FooterView
        },
        meta: {
            title: '关于'
        }
    },
    {  
       path: '/receiver/:args(.*)*' , 
       name: 'receiver' , 
       components: {
        'header': HeaderView ,
        'default': ReceiverView ,
        'footer': FooterView
       },
       // 路由组件传参之命名视图
       props: {
        'header': false ,
        'default': true ,
        'footer': false
       },
       meta: {
        title: '接受参数'
       }
    },
    {  
        path: '/:paths(.*)*' , 
        name: 'NotFound' , 
        components: {
            'header': HeaderView ,
            'default': NotFound ,
            'footer': FooterView
        },
        meta: {
            title: 'Not Found'
        }
    }
];

// 将 topicRoutes 数组中所有元素依次添加到 routes 数组中
routes.push( ...topicRoutes ); // 这里的 `...` 表示展开运算符
routes.push( ...userRoutes );

// 定义路由选项(RouterOptions)
const options = {
    // history: createWebHashHistory(),
    history: createWebHistory(),
    // history: createMemoryHistory(),
    routes // `routes: routes` 的缩写
};

// 根据 路由选项(RouterOptions) 创建 路由器(router) [也称作分发器]
const router = createRouter( options );

// 调用全局的 afterEach 钩子
router.afterEach( (to,from,failure) => {
    console.log( '= = = after each = = =');
    console.log( '\tfrom: ' , from );
    console.log( '\tto: ' , to );
    console.log( '\tfailure: ' , failure );
    // 尝试从 路由 元数据 中 获取 title 属性值
    let { title } = to.meta ;
    // 若 路由元数据 中存在 title 
    if( title ) {
        // 则将 title 属性值作为 页面标题来使用
        document.title = title ;
    }
});

// 导入 路由器(router) [也称作分发器]
export default router ;